<html>
  
  <head>
    <meta charset="utf-8">
    <title>Bootstrap, from Twitter</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="stylesheet" href="css/bootstrap.css">
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <script type="text/javascript" src="js/jquery.validate.js"></script>
    <script type="text/javascript" src="js/additional-methods.js"></script>
    <link rel="stylesheet" href="js/ui-1.10.4/css/ui-start.css">
    <script type="text/javascript" src="js/ui-1.10.4/js/jquery-ui.js"></script>
    <script type="text/javascript" src="js/valida-cadastro.js"></script>
    
    <script>
      $(document).ready(function(){
        $.validator.addMethod("loginRegex", function(value, element) {
        return this.optional(element) || /^[a-z0-9\-\_\@\.-]+$/i.test(value);
        }, "Apenas numeros e letras");
        $("#mod").modal();
        valCad();
        valLog();
      })
    </script>
  </head>
  
  <body style="background:#777777;">
    <div class="modal fade" id="mod">
      <div class="modal-dialog">
        <div class="modal-content">
        <ul class="nav nav-tabs" id="tabContent">
            <li class="active"><a href="#tab-login" data-toggle="tab">Logar</a></li>
            <li><a href="#tab-cadastrar" data-toggle="tab">Cadastrar</a></li>
        </ul>
            <div class="tab-content">
          
              <div id="tab-cadastrar" class="tab-pane">
                
                <h1>Cadastro</h1><br>
                <form action="index.php" role="form" class="form-horizontal" id="formCad" style="margin: 0 10px 10px 10px;">
                <div class="form-group">
                  <div class="col-sm-3"><label for="cadNome" class="label-control">Nome</label></div>
                  <div class="col-sm-9"><input type="text" placeholder="Digite seu nome completo" class="form-control" id="cadNome" name="cadNome"></div>
                </div>
                <div class="form-group">
                  <div class="col-sm-3"><label for="cadEmail" class="label-control">Email</label></div>
                  <div class="col-sm-9"><input type="email" placeholder="Digite seu e-mail" class="form-control" id="cadEmail" name="cadEmail"></div>
                </div>
                <div class="form-group">
                  <div class="col-sm-3"><label for="cadSenha" class="label-control">Senha</label></div>
                  <div class="col-sm-9"><input type="password" placeholder="Digite sua senha" class="form-control" id="cadSenha" name="cadSenha"></div>
                </div>
                <div class="form-group">
                  <div class="col-sm-3"><label for="cadResenha" class="label-control">Repetir senha</label></div>
                  <div class="col-sm-9"><input type="password" placeholder="Repita sua senha" class="form-control" id="cadResenha" name="cadResenha"></div>
                </div>
                <br>
                <button type="button" class="active btn btn-lg btn-primary" id="btn-cadastrar">Eu li e concordo com os termos</button>
                </form>
              </div>
              <div id="tab-login" class="tab-pane active">
                <h1>  Login</h1><br>
                <form role="form" class="form-horizontal" id="formLog" style="margin: 0 10px 10px 10px;">
                  <div class="form-group">
                    <div class="col-sm-3"><label for="logEmail" class="label-control">Email</label></div>
                    <div class="col-sm-9"><input type="email" placeholder="Digite seu email cadastrado" class="form-control" id="logEmail" name="logEmail"></div>
                  </div>
                  <div class="form-group">
                    <div class="col-sm-3"><label for="logSenha" class="label-control">Senha</label></div>
                    <div class="col-sm-9"><input type="password" placeholder="Digite sua senha" class="form-control" id="logSenha" name="logSenha"></div>
                  </div><br>
                  <button type="button" class="active btn btn-lg btn-primary" id="btn-logar" style="padding: 5px 20px;">Logar</button>
                </form>
              </div>
              
            </div>
          
        </div>
      </div>
    </div>

    

  </body>

</html>